import React, { PureComponent }from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { List, Picker, TextareaItem, Button, Accordion, Steps, Icon } from 'antd-mobile';

const Item = List.Item;
const Step = Steps.Step;

const time = [
  [
    {
      label: '早餐',
      value: 'breakfast',
    },
    {
      label: '午餐',
      value: 'lunch',
    },
    {
      label: '晚餐',
      value: 'dinner',
    },
  ],
];
const food = {
  'undefined': [[{label: '', value: ''},]],
  'breakfast': [[{label: '豆浆/油条', value: 'dj'},{label: '白粥/油条', value: 'bz'}]],
  'lunch': [[{label: '黄焖鸡米饭', value: 'hmj'},{label: '土豆牛肉咖喱饭', value: 'tdnr'}]],
  'dinner': [[{label: '芹菜炒鸡胗', value: 'qcjz'},{label: '白切鸡', value: 'bqj'}]],
};
export class MobileAddFood extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      time: undefined,
      food: undefined
    }
  }
  render() {
    const { onSelectDate, goBack, history} = this.props;
    let dateTips = undefined;
    if(onSelectDate.length === 0) {
      dateTips = '请选择'
    } else if (onSelectDate.length === 1) {
      dateTips = onSelectDate[0];
    };
    return (
      <div>
        <List className="my-list">
          <Item wrap extra={<span style={{ color: '#BDBDBD'}} onClick={goBack}>{dateTips}</span>}>日期</Item>
        <Picker
          data={time}
          title="请选择时间段"
          extra={<span style={{ color: '#BDBDBD'}}>请选择</span>}
          value={this.state.time}
          cascade={false}
          onChange={v => this.setState({ time: v, food: undefined})}
          onOk={v => this.setState({ time: v , food: undefined}) }
        >
          <Item>时段</Item>
        </Picker>
        <Picker
          data={food[this.state.time]}
          title="请选择美食"
          cascade={false}
          extra={<span style={{ color: '#BDBDBD'}}>请选择</span>}
          value={this.state.food}
          onChange={v => this.setState({ food: v })}
          onOk={v => this.setState({ food: v })}
        >
          <Item>类别</Item>
        </Picker>
        </List>
        <div style={{padding: '7px', marginTop: '10px'}}>
          <Button onClick={() => history.push('/bookfood/menu')} type='primary' size='small'>报餐</Button>
        </div>
      </div>
    )
  }
}


export class MobileFoodMenu extends PureComponent {
  render() {
    return (
      <div>
        <Accordion accordion>
          <Accordion.Panel header="2018-09-20">
            <List>
              <Item>早餐： 豆浆/油条</Item>
              <Item>午餐： 黄焖鸡米饭</Item>
            </List>
          </Accordion.Panel>
          <Accordion.Panel header="2018-07-04">
            <List>
              <Item>午餐： 黄焖鸡米饭</Item>
            </List>
          </Accordion.Panel>
          <Accordion.Panel header="2018-04-05">
            <List>
              <Item>早餐： 白粥/油条</Item>
              <Item>午餐：土豆牛肉咖喱饭</Item>
              <Item>晚餐：芹菜炒鸡胗</Item>
            </List>
          </Accordion.Panel>
        </Accordion>
      </div>
    )
  }
}
